<template>
  <div
    class="flex justify-center w-full h-[300px] md:h-[400px] md:w-[350px] relative perspective-1000 transform-style-3d"
    @click="handleCardClick"
  >
    <!-- 卡片正面 -->
    <div
      class="absolute h-full w-[80vw] md:w-full transition-transform duration-700 backface-hidden"
      :class="{ 'rotate-y-180': isFlipped }"
    >
      <div
        class="h-full bg-gradient-to-b from-bsr to-bsy/90 backdrop-blur-lg rounded-xl overflow-hidden shadow-[0_0_15px_rgba(0,0,0,0.3)]"
      >
        <img
          :src="cardInfo.imgUrl"
          :alt="cardInfo.title"
          class="w-full h-title object-cover"
        />
        <div class="p-6">
          <h3 class="text-xl font-bold text-white mb-2">
            {{ cardInfo.title }}
          </h3>
          <div class="flex flex-wrap gap-2">
            <span
              v-for="tech in categoryList"
              :key="tech"
              class="px-3 py-1 bg-white/20 rounded-full text-sm text-white"
            >
              {{ tech }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 卡片反面 -->
    <div
      class="absolute h-full w-[80vw] md:w-full duration-700 backface-hidden bg-gradient-to-b from-bsy to-bsr/90 backdrop-blur-lg rounded-xl overflow-hidden shadow-[0_0_15px_rgba(0,0,0,0.3)] p-6 transition-transform"
      :class="{ 'rotate-y-[-180deg]': !isFlipped }"
    >
      <h3 class="text-xl font-bold text-white mb-4">项目描述</h3>
      <p class="text-white/70 mb-6 text-lg">
        {{ cardInfo.description }}
      </p>
      <div
        class="absolute bottom-6 left-6 right-6 flex justify-between items-center"
      >
        <a
          :href="cardInfo.projectURL"
          target="_blank"
          class="text-white hover:text-bsr"
        >
          <i class="fab fa-github text-2xl"></i>
        </a>
        <a
          :href="cardInfo.projectURL"
          target="_blank"
          class="px-4 py-2 bg-bsr text-white rounded-lg hover:bg-opacity-90"
        >
          查看演示
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CardItemProps, CardItemEmit } from "~/type";
const props = defineProps<CardItemProps>();
const emits = defineEmits<CardItemEmit>();
const isFlipped = ref(false);
const categoryList = computed(() => {
  return props.cardInfo.projectLabel.split("|");
});
function handleCardClick() {
  isFlipped.value = !isFlipped.value;
  emits("click", isFlipped.value);
}
</script>

<style scoped></style>
